<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>书签分类配置</title>
  <style>
    body {
      width: 500px;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      color: #333;
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #2c3e50;
    }
    .section {
      margin-bottom: 25px;
    }
    .category-item {
      margin-bottom: 15px;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background-color: #f9f9f9;
    }
    .category-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .category-title {
      font-weight: 600;
      color: #2c3e50;
    }
    .keywords-container {
      margin-bottom: 10px;
    }
    .keyword-input-container {
      display: flex;
      margin-bottom: 5px;
    }
    .keyword-input {
      flex: 1;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      font-size: 14px;
    }
    .remove-keyword-btn {
      padding: 8px 12px;
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      font-size: 14px;
    }
    .remove-keyword-btn:hover {
      background-color: #c82333;
    }
    .add-keyword-btn {
      padding: 6px 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      margin-top: 5px;
    }
    .add-keyword-btn:hover {
      background-color: #0056b3;
    }
    .button {
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.3s;
    }
    .button:hover {
      background: #45a049;
    }
    .button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .remove-category-btn {
      padding: 5px 10px;
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
    }
    .remove-category-btn:hover {
      background-color: #c82333;
    }
    .add-category-container {
      text-align: center;
      margin-top: 20px;
      padding: 15px;
      border: 2px dashed #ccc;
      border-radius: 4px;
      cursor: pointer;
    }
    .add-category-container:hover {
      border-color: #4CAF50;
      background-color: #f0f9f0;
    }
    .add-category-text {
      color: #666;
      font-size: 14px;
    }
    .message {
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      display: none;
    }
    .message-success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    .message-error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    .category-title-input {
      padding: 6px 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      color: #2c3e50;
    }
  </style>
</head>
<body>
  <h2>书签分类配置</h2>
  
  <div id="message" class="message"></div>
  
  <div class="section">
    <h3>分类设置</h3>
    <div id="categories-container">
      <!-- 分类项将通过JavaScript动态生成 -->
    </div>
    
    <div id="add-category" class="add-category-container">
      <div class="add-category-text">+ 添加新分类</div>
    </div>
  </div>
  
  <div class="button-group">
    <button class="button" id="resetBtn">恢复默认设置</button>
    <button class="button" id="saveBtn">保存配置</button>
  </div>
  
  <script src="config.js"></script>
</body>
</html>